<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="/WEB-INF/templates/templateFormulario.xhtml">
 
	<ui:define name="formContent">
	<style>
		.ui-accordion .ui-accordion-content {
	    	margin-left: auto;
	    	margin-right: auto;
	    	padding: 0%;
	    }
	    
	    .ui-tabs .ui-tabs-panel {
	    	padding: 0px 0px;
    	}
 	</style>
	<p:scrollPanel style="width:900px;height:auto" mode="native">
 	<p:panelGrid>
		<p:row>
			<p:column style="vertical-align: top; padding: 0 0 0 0">
				<p:accordionPanel id="accordion" multiple="true">
		    		<p:tab title="#{msg['message.padPP.labelUO']}">
						<p:tree id="uoTree" value="#{planeacionPersonalMB.root}" var="node"
							selectionMode="single" selection="#{planeacionPersonalMB.selectedNode}" dynamic="true">
							 <p:ajax event="select" execute="@this sociedad"
								update=":formgral:panelCaptura :formgral:panelMsg :formgral:accordion:busquedaForm:panelBusqueda"
								listener="#{planeacionPersonalMB.onNodeSelect}"/>
							<p:treeNode>
								<h:outputText value="#{node}" />
							</p:treeNode>
						</p:tree>
		    		</p:tab>
		    		
	                <p:tab id="busquedaTab" title="#{msg['message.padPP.titleSearchEmp']}">
	                	<h:form id="busquedaForm">
	                		<ui:include src="busquedaPersonal.xhtml"/>
						</h:form>
	                </p:tab>
	            </p:accordionPanel>
			</p:column>
 	
	    	<p:column style="vertical-align: top; padding: 0 0 0 0">
    			<p:panelGrid>
					<f:facet name="header">
			 		<p:row>
			 			<p:column colspan="2">
			 				<h:outputText id="currentUO" value="#{planeacionPersonalMB.selectedNode}" />
			 			</p:column>
			 		</p:row>
					</f:facet>
					<p:row>
			       		<p:column><h:outputText value = "#{msg['message.padPP.labelSociedad']}"/></p:column>
			       		<p:column>
			       			<p:selectOneMenu id="sociedad" value="#{planeacionPersonalMB.sociedad}">
			 						
								<f:selectItems value="#{planeacionPersonalMB.sociedades}" var="soc"
									itemValue="#{soc.sociedad}" itemLabel="#{soc.sociedadDescripcion}" />
								<p:ajax process="@this"
									update="panelCaptura panelMsg :formgral:accordion:busquedaForm:panelBusqueda"
									listener="#{planeacionPersonalMB.processChangeSociedad}" />
			 						
				 			</p:selectOneMenu>
			       		</p:column>
			   		</p:row>
				</p:panelGrid>
				<p:outputPanel id="panelMsg">
					<p:panelGrid rendered="#{planeacionPersonalMB.panelMsgShow}">
						<f:facet name="header">
							<p:row>
								<p:column>
									<h:outputFormat value = "#{msg['message.padPP.labelNoDefBudget']}">
										<f:param value="#{planeacionPersonalMB.selectedNode.data.unidadOrganizativaDescripcion}"/>
										<f:param value="#{planeacionPersonalMB.sociedad}"/>
									</h:outputFormat>
								</p:column>
							</p:row>
						</f:facet>
					</p:panelGrid>
				</p:outputPanel>
				<p:outputPanel id="panelCaptura">
					<c:if test="#{planeacionPersonalMB.capturaEnabled == false and !planeacionPersonalMB.panelMsgShow}">
						<p:panelGrid>
							<f:facet name="header">
								<p:row>
									<p:column>
										<h:outputFormat value="#{msg['message.padPP.labelNoEnabledToCapture']}">
											<f:param value="#{planeacionPersonalMB.selectedNode.data.unidadOrganizativaDescripcion}"/>
											<f:param value="#{planeacionPersonalMB.sociedad}"/>
										</h:outputFormat>
									</p:column>
								</p:row>
							</f:facet>
						</p:panelGrid>
					</c:if>
					<c:if test="#{planeacionPersonalMB.capturaEnabled == true}">
						<p:toolbar rendered="#{planeacionPersonalMB.panelCapturaShow}">
							<p:toolbarGroup align="left">
								<p:separator />
								<p:commandButton type="button" title="#{msg['message.padPP.labelSavePlanning']}" icon="ui-icon-disk"/>
								<p:separator />
								<p:commandButton type="button" title="#{msg['message.padPP.labelPrintPlanning']}" icon="ui-icon-print"/>
							</p:toolbarGroup>
						</p:toolbar>
		    			<p:tabView id="tabView" rendered="#{planeacionPersonalMB.panelCapturaShow}">
		    				<p:tab id="tab1" title="#{msg['message.padPP.labelTableView']}">
		    					<ui:include src="vistaTabla.xhtml"/>
		    				</p:tab>
		    				<p:tab id="tab2" title="#{msg['message.padPP.labelGraphicView']}">
		    				</p:tab>
		    			</p:tabView>
		    		</c:if>
				</p:outputPanel>
	    	</p:column>
    	</p:row>
    </p:panelGrid>
	</p:scrollPanel>
	</ui:define>

</ui:composition>